<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>CSS Filter 属性集合</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        user-select: none;
      }

      body {
        min-height: 100vh;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 30px;
        background: #1a1a1a;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        padding: 40px;
      }

      .filter-card {
        background: #2a2a2a;
        border-radius: 16px;
        padding: 30px;
        text-align: center;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
        transition: transform 0.3s ease;
      }

      .filter-card:hover {
        transform: translateY(-5px);
      }

      .filter-label {
        font-size: 16px;
        font-weight: 600;
        color: #fff;
        margin-bottom: 20px;
      }

      .filter-demo {
        width: 200px;
        height: 200px;
        margin: 0 auto;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        color: white;
        font-weight: bold;
      }

      /* Blur 模糊 */
      .blur {
        filter: blur(5px);
      }

      /* Brightness 亮度 */
      .brightness-normal {
        filter: brightness(1);
      }

      .brightness-light {
        filter: brightness(1.5);
      }

      .brightness-dark {
        filter: brightness(0.5);
      }

      /* Contrast 对比度 */
      .contrast-normal {
        filter: contrast(1);
      }

      .contrast-high {
        filter: contrast(1.5);
      }

      .contrast-low {
        filter: contrast(0.5);
      }

      /* Grayscale 灰度 */
      .grayscale-none {
        filter: grayscale(0%);
      }

      .grayscale-full {
        filter: grayscale(100%);
      }

      .grayscale-partial {
        filter: grayscale(50%);
      }

      /* Hue-rotate 色相旋转 */
      .hue-rotate-0 {
        filter: hue-rotate(0deg);
      }

      .hue-rotate-90 {
        filter: hue-rotate(90deg);
      }

      .hue-rotate-180 {
        filter: hue-rotate(180deg);
      }

      .hue-rotate-270 {
        filter: hue-rotate(270deg);
      }

      /* Invert 反色 */
      .invert-none {
        filter: invert(0%);
      }

      .invert-full {
        filter: invert(100%);
      }

      .invert-partial {
        filter: invert(50%);
      }

      /* Opacity 透明度 */
      .opacity-full {
        filter: opacity(100%);
      }

      .opacity-half {
        filter: opacity(50%);
      }

      .opacity-low {
        filter: opacity(30%);
      }

      /* Saturate 饱和度 */
      .saturate-normal {
        filter: saturate(1);
      }

      .saturate-high {
        filter: saturate(2);
      }

      .saturate-low {
        filter: saturate(0.5);
      }

      /* Sepia 怀旧 */
      .sepia-none {
        filter: sepia(0%);
      }

      .sepia-full {
        filter: sepia(100%);
      }

      .sepia-partial {
        filter: sepia(50%);
      }

      /* Drop-shadow 阴影 */
      .drop-shadow-small {
        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
      }

      .drop-shadow-medium {
        filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
      }

      .drop-shadow-large {
        filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.5));
      }

      .drop-shadow-colored {
        filter: drop-shadow(0 4px 8px rgba(102, 126, 234, 0.6));
      }

      /* 组合效果 */
      .filter-combo-1 {
        filter: blur(2px) brightness(1.2) contrast(1.1);
      }

      .filter-combo-2 {
        filter: grayscale(50%) sepia(50%) saturate(1.5);
      }

      .filter-combo-3 {
        filter: hue-rotate(90deg) brightness(1.1) contrast(1.2);
      }

      .filter-combo-4 {
        filter: invert(20%) sepia(50%) saturate(200%);
      }
    </style>
  </head>
  <body>
    <!-- Blur -->
    <div class="filter-card">
      <div class="filter-label">Blur (模糊)</div>
      <div class="filter-demo blur">blur(5px)</div>
    </div>

    <!-- Brightness -->
    <div class="filter-card">
      <div class="filter-label">Brightness (亮度)</div>
      <div class="filter-demo brightness-light">brightness(1.5)</div>
    </div>

    <div class="filter-card">
      <div class="filter-label">Brightness Dark</div>
      <div class="filter-demo brightness-dark">brightness(0.5)</div>
    </div>

    <!-- Contrast -->
    <div class="filter-card">
      <div class="filter-label">Contrast High</div>
      <div class="filter-demo contrast-high">contrast(1.5)</div>
    </div>

    <div class="filter-card">
      <div class="filter-label">Contrast Low</div>
      <div class="filter-demo contrast-low">contrast(0.5)</div>
    </div>

    <!-- Grayscale -->
    <div class="filter-card">
      <div class="filter-label">Grayscale (灰度)</div>
      <div class="filter-demo grayscale-full">grayscale(100%)</div>
    </div>

    <div class="filter-card">
      <div class="filter-label">Grayscale Partial</div>
      <div class="filter-demo grayscale-partial">grayscale(50%)</div>
    </div>

    <!-- Hue-rotate -->
    <div class="filter-card">
      <div class="filter-label">Hue-rotate 90°</div>
      <div class="filter-demo hue-rotate-90">hue-rotate(90deg)</div>
    </div>

    <div class="filter-card">
      <div class="filter-label">Hue-rotate 180°</div>
      <div class="filter-demo hue-rotate-180">hue-rotate(180deg)</div>
    </div>

    <!-- Invert -->
    <div class="filter-card">
      <div class="filter-label">Invert (反色)</div>
      <div class="filter-demo invert-full">invert(100%)</div>
    </div>

    <div class="filter-card">
      <div class="filter-label">Invert Partial</div>
      <div class="filter-demo invert-partial">invert(50%)</div>
    </div>

    <!-- Opacity -->
    <div class="filter-card">
      <div class="filter-label">Opacity (透明度)</div>
      <div class="filter-demo opacity-half">opacity(50%)</div>
    </div>

    <div class="filter-card">
      <div class="filter-label">Opacity Low</div>
      <div class="filter-demo opacity-low">opacity(30%)</div>
    </div>

    <!-- Saturate -->
    <div class="filter-card">
      <div class="filter-label">Saturate High</div>
      <div class="filter-demo saturate-high">saturate(2)</div>
    </div>

    <div class="filter-card">
      <div class="filter-label">Saturate Low</div>
      <div class="filter-demo saturate-low">saturate(0.5)</div>
    </div>

    <!-- Sepia -->
    <div class="filter-card">
      <div class="filter-label">Sepia (怀旧)</div>
      <div class="filter-demo sepia-full">sepia(100%)</div>
    </div>

    <div class="filter-card">
      <div class="filter-label">Sepia Partial</div>
      <div class="filter-demo sepia-partial">sepia(50%)</div>
    </div>

    <!-- Drop-shadow -->
    <div class="filter-card">
      <div class="filter-label">Drop-shadow Small</div>
      <div class="filter-demo drop-shadow-small">drop-shadow</div>
    </div>

    <div class="filter-card">
      <div class="filter-label">Drop-shadow Large</div>
      <div class="filter-demo drop-shadow-large">drop-shadow</div>
    </div>

    <div class="filter-card">
      <div class="filter-label">Drop-shadow Colored</div>
      <div class="filter-demo drop-shadow-colored">drop-shadow</div>
    </div>

    <!-- 组合效果 -->
    <div class="filter-card">
      <div class="filter-label">组合效果 1</div>
      <div class="filter-demo filter-combo-1">blur + brightness</div>
    </div>

    <div class="filter-card">
      <div class="filter-label">组合效果 2</div>
      <div class="filter-demo filter-combo-2">grayscale + sepia</div>
    </div>

    <div class="filter-card">
      <div class="filter-label">组合效果 3</div>
      <div class="filter-demo filter-combo-3">hue-rotate + brightness</div>
    </div>

    <div class="filter-card">
      <div class="filter-label">组合效果 4</div>
      <div class="filter-demo filter-combo-4">invert + sepia</div>
    </div>
  </body>
</html>

